<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ include file="/WEB-INF/public/head.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>意见反馈</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"/>
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
    <meta content="telephone=no" name="format-detection"/>
    <link href="${system}/static/css/feedback.css" rel="stylesheet" type="text/css"/>
</head>
<style>







    .mui-popup-backdrop
    {
        position: fixed;
        z-index: 998;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        -webkit-transition-duration: 400ms;
        transition-duration: 400ms;

        opacity: 0;
        background: rgba(0, 0, 0, .4);
    }
    .mui-popup-backdrop.mui-active
    {
        opacity: 1;
    }

    .mui-popup
    {
        position: fixed;
        z-index: 10000;
        top: 50%;
        left: 50%;

        display: none;
        overflow: hidden;

        width: 270px;

        -webkit-transition-property: -webkit-transform,opacity;
        transition-property:         transform,opacity;
        -webkit-transform: translate3d(-50%, -50%, 0) scale(1.185);
        transform: translate3d(-50%, -50%, 0) scale(1.185);
        text-align: center;

        opacity: 0;
        color: #000;
        border-radius: 13px;
    }
    .mui-popup.mui-popup-in
    {
        display: block;

        -webkit-transition-duration: 400ms;
        transition-duration: 400ms;
        -webkit-transform: translate3d(-50%, -50%, 0) scale(1);
        transform: translate3d(-50%, -50%, 0) scale(1);

        opacity: 1;
    }
    .mui-popup.mui-popup-out
    {
        -webkit-transition-duration: 400ms;
        transition-duration: 400ms;
        -webkit-transform: translate3d(-50%, -50%, 0) scale(1);
        transform: translate3d(-50%, -50%, 0) scale(1);

        opacity: 0;
    }

    .mui-popup-inner
    {
        position: relative;

        padding: 15px;

        border-radius: 13px 13px 0 0;
        background: rgba(255, 255, 255, .95);
    }
    .mui-popup-inner:after
    {
        position: absolute;
        z-index: 15;
        top: auto;
        right: auto;
        bottom: 0;
        left: 0;

        display: block;

        width: 100%;
        height: 1px;

        content: '';
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5);
        -webkit-transform-origin: 50% 100%;
        transform-origin: 50% 100%;

        background-color: rgba(0, 0, 0, .2);
    }

    .mui-popup-title
    {
        font-size: 18px;
        font-weight: 500;

        text-align: center;
    }

    .mui-popup-title + .mui-popup-text
    {
        font-family: inherit;
        font-size: 14px;

        margin: 5px 0 0;
    }

    .mui-popup-buttons
    {
        position: relative;

        display: -webkit-box;
        display: -webkit-flex;
        display:         flex;

        height: 44px;

        -webkit-box-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
    }

    .mui-popup-button
    {
        font-size: 17px;
        line-height: 44px;

        position: relative;

        display: block;
        overflow: hidden;

        box-sizing: border-box;
        width: 100%;
        height: 44px;
        padding: 0 5px;

        cursor: pointer;
        text-align: center;
        white-space: nowrap;
        text-overflow: ellipsis;

        color: #007aff;
        background: rgba(255, 255, 255, .95);

        -webkit-box-flex: 1;
    }
    .mui-popup-button:after
    {
        position: absolute;
        z-index: 15;
        top: 0;
        right: 0;
        bottom: auto;
        left: auto;

        display: block;

        width: 1px;
        height: 100%;

        content: '';
        -webkit-transform: scaleX(.5);
        transform: scaleX(.5);
        -webkit-transform-origin: 100% 50%;
        transform-origin: 100% 50%;

        background-color: rgba(0, 0, 0, .2);
    }
    .mui-popup-button:first-child
    {
        border-radius: 0 0 0 13px;
    }
    .mui-popup-button:first-child:last-child
    {
        border-radius: 0 0 13px 13px;
    }
    .mui-popup-button:last-child
    {
        border-radius: 0 0 13px 0;
    }
    .mui-popup-button:last-child:after
    {
        display: none;
    }
    .mui-popup-button.mui-popup-button-bold
    {
        font-weight: 600;
    }

    .mui-popup-input input
    {
        font-size: 14px;

        width: 100%;
        height: 26px;
        margin: 15px 0 0;
        padding: 0 5px;

        border: 1px solid rgba(0, 0, 0, .3);
        border-radius: 0;
        background: #fff;
    }

    .mui-plus.mui-android .mui-popup-backdrop
    {
        -webkit-transition-duration: 1ms;
        transition-duration: 1ms;
    }

    .mui-plus.mui-android .mui-popup
    {
        -webkit-transition-duration: 1ms;
        transition-duration: 1ms;
        -webkit-transform: translate3d(-50%, -50%, 0) scale(1);
        transform: translate3d(-50%, -50%, 0) scale(1);
    }












    .mui-toast-container {
        line-height: 17px;
        position: fixed;
        z-index: 9999;
        bottom: 50px;
        left: 50%;
        -webkit-transition: opacity .3s;
        transition: opacity .3s;
        -webkit-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
        opacity: 0;
    }

    .mui-toast-container.mui-active {
        opacity: .9;
    }

    .mui-toast-message {
        font-size: 14px;
        padding: 10px 25px;
        text-align: center;
        color: #fff;
        border-radius: 6px;
        background-color: #323232;
    }
</style>
<body>
<section class="aui-flexView">

    <section class="aui-scrollView">
        <div class="aui-view-box">
            <div class="aui-view-box-item">
                <h2>您的问题或建议:</h2>
                <textarea id="content" maxlength="200" placeholder="输入个人意见反馈,字数在200字以内"></textarea>
            </div>
            <div class="aui-view-box-item">
                <h2>您的联系方式:</h2>
                <input type="text" id="phone" placeholder="输入电话号码">
                <input type="text" id="email" placeholder="输入电子邮箱">
            </div>
            <div class="aui-view-box-item">
                <p>留下您的联系方式,以便我们了解问题后及时反馈结果</p>
            </div>
            <div class="aui-btn-submit">
                <button id="submit">提交建议</button>
            </div>
        </div>
    </section>
    <footer class="aui-footer aui-footer-fixed">
        <p>
                    <span>
                        <!--遇到问题了？ 点击 <em>在线客服</em>-->
                    </span>
        </p>
    </footer>
</section>
</body>

<script src="${system}/static/js/mui.js"></script>
<script src="${system}/static/js/mui.min.js"></script>
<script>

    $("#submit").click(function () {
        //验证反馈内容是否满足要求
        var content = $("#content").val();    //反馈内容
        if (content.length < 10) {
            mui.toast("反馈内容必须十个字或以上!");
            return;
        }

        //判断手机号是否符合要求
        var v_phoneNumber = /^1[34578]\d{9}$/; //手机号表达式
        var phone = $("#phone").val();
        if (!v_phoneNumber.test(phone)) {
            mui.toast("手机号格式错误!");
            return;
        }

        var v_email = /^^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$$/;
        var email = $("#email").val();
        if (!v_email.test(email)) {
            mui.toast("邮箱格式错误!");
            return;
        }
        ajax("${system}/feedback/submitFeedBack", {
            "feedback_describe": content,
            "feedback_phone": phone,
            "feedback_email": email
        }, "text", "post", true, function (data) {
            if (data=="success") {
                mui.alert("感谢您的反馈,我们会努力改进!","谢谢反馈","OK",function () {
                    window.location.href="${system}/home/index";
                });
                //提交成功
            }else if(data=="fail"){
                mui.toast("提交反馈失败!");
                //提交失败
            }else{
                mui.toast("提交反馈时出现问题,请稍后再试!");
                //发生异常
            }
        }, function (error) {
            console.log(error);
            mui.toast('请检查你的网络设置!');
        })
    });


</script>
</html>
